<template>
  <div id="oder-list" class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="button"
            class="el-button el-button--primary"
            @click="
              dialogFormVisible = true;
              diaTitle = '添加菜单';
              isCreate = 'true';
            "
          >
            添加菜单</el-button
          >
        </el-form-item>

      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      element-loading-text="给我一点时间"
      style="width: 100%"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      row-key="id"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="title" label="菜单名称"></el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="name" label="前端名称"></el-table-column>
      <el-table-column prop="icon" label="菜单图标">
        <template slot-scope="scope">
          <i>{{ scope.row.icon }}</i>
          <svg-icon :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="菜单级数"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column prop="hidden" label="是否使用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.hidden"
            active-color="#13ce66"
            inactive-color="#ccc"
            :active-value="1"
            :inactive-value="0"
            @change="editMenuStatus(scope.row.id, scope.row.hidden)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="operate" align="center" label="操作" width="400">
        <template slot-scope="scope">
          <div class="fx" style="display: flex">
            <el-button
              @click="editMenu(scope.row)"
              type="button"
              icon="el-icon-edit"
              class="el-button el-button--primary"
              >修改</el-button
            >

            <el-button
              type="button"
              icon="el-icon-delete"
              class="el-button el-button--danger"
              @click="deleteMenu(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- //新增 修改 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      width="40%"
    >
      <el-form :model="createForm" :rules="rules" ref="createForm">
        <el-form-item
          prop="title"
          label="菜单名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="createForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="parentId"
          label="上级菜单"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="createForm.parentId"
            placeholder="请选择"
            @change="Select($event)"
          >
            <el-option
              v-for="item in menuSelect"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          prop="icon"
          label="菜单图标"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="createForm.icon"
            placeholder="请选择"
            @change="iconSelect(createForm.icon)"
          >
            <el-option
              v-for="item in icons"
              :key="item.index"
              :label="item"
              :value="item"
            >
            <svg-icon :icon-class="item"></svg-icon>
            <span>{{item}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="name"
          label="前端名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="createForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序" :label-width="formLabelWidth">
          <el-input v-model="createForm.sort" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="hidden"
          label="是否启用"
          :label-width="formLabelWidth"
        >
          <el-switch
            v-model="createForm.hidden"
            active-color="#13ce66"
            inactive-color="#ccc"
            :active-value="1"
            :inactive-value="0"
            @change="statusChange(createForm.hidden)"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="isCreate == 'true'"
          type="primary"
          @click="submitForm('createForm')"
          >创建</el-button
        >
        <el-button 
        icon="el-icon-edit"
        v-else type="primary" @click="edit('createForm')"
          >修改</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  allMenuList,
  createMenu,
  editMenu,
  deleteMenu,
  editMenuStatus,
  searchMenu,
} from "@/api/menu";
export default {
  data() {
    return {
      rules: {
        parentId: [
          { required: true, message: "请选择上级菜单", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入前端名称", trigger: "change" },
        ],
        icon: [
          { required: true, message: "请输入菜单图标", trigger: "change" },
        ],
        title: [
          { required: true, message: "请输入菜单名称", trigger: "change" },
        ],
      },
      selectTitle: "",
      loading: false,
      parentID: "",
      total: 0,
      pageNum: 1,
      pageSize: 50,
      icons: ["people","user","equipment","dashboard", "tab", "order", "financial", "peoples", "example",'icCard ','system',"ums","interface","fire"],
      menuSelect: [
        {
          parentId: 0,
          title: "无上级菜单",
          id: 0,
          hidden: 0,
          sort: "",
          parentId: "",
          name: "",
          level: "",
          icon: "",
        },
      ],
      menuSelectName: "",
      roleID: "",
      currentResources: [], //当前角色资源
      currentMenu: [], //当前角色菜单
      resourcesIds: [], //分配的资源数组
      editID: "",
      isCreate: "",
      diaTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      tableData: [],
      currentPage: 1,
      total: 0,
      createForm: {
        hidden: 0,
        sort: "",
        parentId: "",
        name: "",
        level: "",
        id: "",
        icon: "",
        title: "",
      },
    };
  },
  methods: {
    iconSelect(val) {
        console.log(val);
      this.createForm.icon = val;
    },
    clear() {
      this.getAllMenuList();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.searchMenu();
    },
    currentChange(val) {
      this.pageNum = val;
      this.searchMenu();
    },
    // 模糊查询
    async searchMenu() {
      let parentId = this.parentID;
      let query = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      if (parentId.length < 1) {
        this.getAllMenuList();
      } else {
        let res = await searchMenu(parentId, query);
        this.tableData = res.data;
      }
    },
    //   删除菜单
    deleteMenu(id) {
      this.$confirm("确定删除菜单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteMenu(id);
          if (res.code == 1) {
            this.$message.success("删除菜单成功");
            this.getAllMenuList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //   上级菜单下拉框
    Select(id) {
        console.log(id);
      if (id == 0) {
        this.createForm.parentId = 0;
      }
    },

    // 菜单状态修改
    async editMenuStatus(id, hidden) {
      let query = {
        hidden: hidden,
      };
      let res = await editMenuStatus(id, query);
      if (res.code == 1) {
        this.$message.success("菜单状态变更成功");
      } else {
        this.$message.error("菜单状态变更失败");
        return;
      }
    },

    batchDelRole() {
      this.selection = true;
    },
    // 菜单修改提交
    edit(createForm) {
      this.$refs[createForm].validate(async (valid) => {
        //开启校验
        if (valid) {
          // 如果校验通过，请求接口，允许提交表单
          let res = await editMenu(this.editID, this.createForm);
          if (res.code == 1) {
            this.$message.success("菜单修改成功");
            this.getAllMenuList();
            this.dialogFormVisible = false;
            this.createForm = {
              hidden: 0, //状态
              sort: "", //排序
              parentId: "", //上级菜单
              name: "", //前端名称
              level: "", //级别
              id: "", //id
              icon: "", //前端图标
              title: "", //菜单名称
            };
          } else {
            this.$message.error("菜单修改失败");
            this.dialogFormVisible = false;
            this.createForm = {
              hidden: 0, //状态
              sort: "", //排序
              parentId: "", //上级菜单
              name: "", //前端名称
              level: "", //级别
              id: "", //id
              icon: "", //前端图标
              title: "", //菜单名称
            };
          }
        } else {
          //校验不通过
          return false;
        }
      });
    },
    // 对话框关闭
    closeDialog() {
            if (this.$refs.createForm) {
        this.$refs.createForm.resetFields();
      }
      // console.log("触发");
      this.isCreate = "";
      // this.diaTitle="";
      this.createForm = {
        hidden: 0, //状态
        sort: 0, //排序
        parentId: "", //上级菜单
        name: "", //前端名称
        level: "", //级别
        id: "", //id
        icon: "", //前端图标
        title: "", //菜单名称
      };
    },
    // 修改菜单
    editMenu(row) {
      // console.log("386",row);
      this.diaTitle = "菜单修改";
      this.createForm = {
        hidden: row.hidden, //状态
        sort: row.sort, //排序
        parentId: row.parentId, //上级菜单
        name: row.name, //前端名称
        level: row.level, //级别
        id: row.id, //id
        icon: row.icon, //前端图标
        title: row.title, //菜单名称
      };
      this.editID = row.id;
      this.dialogFormVisible = true;
    },
    // 状态修改
    statusChange(e) {
      this.createForm.hidden = e;
    },
    // 获取所有菜单
    async getAllMenuList() {
      this.loading = true;
      this.menuSelect = [
        {
          parentId: 0,
          title: "无上级菜单",
          id: 0,
          hidden: 0,
          sort: "",
          parentId: "",
          name: "",
          level: "",
        },
      ];
      let res = await allMenuList();
      if (res.code == 1) {
        this.tableData = res.data;
        // this.menuSelect=res.data
        this.tableData.map((item) => {
          this.menuSelect.push(item);
        });
      }
      this.loading = false;
      // else if(res.code==2){
      //   this.loading = false;
      // }
    },
    // 添加菜单
    async createMenu() {
      const res = await createMenu(this.createForm);
      // console.log("添加", res);
      if (res.code == 1) {
        this.$message.success("菜单创建成功");
        this.getAllMenuList();
        this.dialogFormVisible = false;
        this.createForm = {
          hidden: 0, //状态
          sort: 0, //排序
          parentId: "", //上级菜单
          name: "", //前端名称
          level: "", //级别
          id: "", //id
          icon: "", //前端图标
          title: "", //菜单名称
        };
      } else {
        this.$message.error("菜单创建失败");
        this.dialogFormVisible = false;
        this.createForm = {
          hidden: 0,
          sort: 0,
          parentId: "",
          name: "",
          level: "",
          id: "",
          icon: "",
          title: "", //菜单名称
        };
      }
    },
    // 创建提交
    submitForm(createForm) {
      this.$refs[createForm].validate((valid) => {
        //开启校验
        if (valid) {
          // 如果校验通过，请求接口，允许提交表单
          this.createMenu();
        } else {
          //校验不通过
          return false;
        }
      });
    },
  },
  computed: {},
  mounted() {},
  created() {
    this.getAllMenuList();
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tree-node,
/deep/ .custom-tree-node {
  margin-bottom: 10px;
}
label {
  font-weight: 700;
}
/deep/ .custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
</style>
